<template>
	<view class="home">
		<view class="activebg">
			<ty-swiper-home :list="activelist" height='360' radius='50'></ty-swiper-home>
		</view>
		<view class="bg-ff bg-shadow margin-top-40 flex flex-wrap padding-30 radius-40">
			<view class="flex align-center flex-direction catebtn" style="width: 80rpx;" v-for="(item,index) in catelist" :key="index"
				@click="go('pages/shop/classify')">
				<image :src="item.image" mode="" class="cateimg"></image>
				<view class="text-24 margin-top-10 text-cut-one">{{item.name}}</view>
			</view>
		</view>
		<view class="flex flex-direction margin-top-40">
			<view class="flex">
				<view class="text-32 text-bold position-relative">
					爆款
					<image src="/static/board/xing.png" mode="" class="xingimg"></image>
				</view>
			</view>
			<image src="/static/board/line.png" mode="" class="lineimg"></image>
		</view>
		<view class="flex justify-between flex-wrap margin-top-30">
			<view class="width-330 bg-ff radius-40 margin-bottom-40 bg-shadow" v-for="(item,index) in list" :key="index"
				@click="go('/pages/shop/detail?id='+item.id)">
				<image :src="item.image" mode="" class="gameimg"></image>
				<view class="padding-tb-20 padding-lr-30">
					<view class="text-cut-two line-30 height-60 text-28 text-bold">{{item.name}}</view>
					<view class="flex align-center margin-top-15">
						<view style="font-weight: bold;" class="text-28 flex-one text-red"><text style="font-size: 26rpx;">￥</text>{{item.price}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				activelist: [],
				catelist: [],
				list: []
			}
		},
		onReady() {
			this.rq.getData('common/banner', {
				type: 3
			}).then(res => {
				if (res.code == 1) {
					this.activelist = res.data
				}
			})
			this.rq.getData('MemProducts/category').then(res => {
				if (res.code == 1) {
					this.catelist = res.data
				}
			})
			this.loadList(1)
		},
		methods: {
			loadList(isFirstPage) {
				var that = this
				that.rq.getList('MemProducts/products_list', {}, {
					that: that,
					first_page: isFirstPage
				})
			},
		},
		onReachBottom() {
			this.loadList(0)
		}
	}
</script>

<style>
	.home {
		width: 100%;
		min-height: 100vh;
		background: #fff;
		padding: 40rpx 30rpx;
	}

	.cateimg {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
	}

	.xingimg {
		width: 20rpx;
		height: 20rpx;
		position: absolute;
		top: -5rpx;
		right: -25rpx;
	}

	.lineimg {
		width: 76rpx;
		height: 10rpx;
	}

	.gameimg {
		width: 330rpx;
		height: 278rpx;
		border-radius: 40rpx 40rpx 0rpx 0rpx;
	}
	.catebtn{
		margin-right: 55rpx;
		margin-bottom: 20rpx;
	}
	.catebtn:nth-child(5n){
		margin-right: 0;
	}
</style>